<template>
  <base-breadcrumb :breadcrumb="!isAudit">
    <div class="about-master-container" v-loading="loading">
      <a-card class="mb20">
        <titleName title="会议发起" />
        <BForm
          ref="BForm"
          :config="formConfig"
          :form="form"
          :rule="rules"
          @selectOrg="selectOrg"
        />
      </a-card>
      <a-card class="mb20" v-if="canEdit">
        <a-form-item label="参会者选择：" prop="meetingEmployeeList">
          <div class="mb12">
            <a-button icon="plus" class="btn_right" type="primary" @click="visible = true">
              添加人员
            </a-button>
            <a-button
              :disabled="selectRows.length < 1"
              icon="delete"
              type="danger"
              @click="removePeople(selectRows)"
            >移除
            </a-button>
          </div>
          <div class="pub-table-select-count" style="line-height: 0;">
            <a-icon type="info-circle" theme="twoTone" />
            已选择{{ selectRows.length }}
          </div>
          <b-table
            ref="tableEmployee"
            :columns="columnsEmployee"
            :request="loadDataEmployee"
            :selectConfig="{use: true, type: 'checkbox',rowKey: 'id' }"
            @select-click="selectClick"
          >
            <!-- 表格行操作栏 -->
            <template slot="actions" slot-scope="text, record, index">
              <a @click="removePeople([record])">移除</a>
            </template>
          </b-table>
        </a-form-item>
      </a-card>
      <a-card class="mb20" v-if="this.form.status !== STATUS.DRAFT">
        <titleName title="辨识依据汇总" />
        <div class="wrapper">
          <div class="left">
            <div class="nav" @click="activeKey = 1" :class="{active:activeKey === 1}">项目生产经理</div>
            <div class="nav" @click="activeKey = 2" :class="{active:activeKey === 2}">项目商务经理</div>
            <div class="nav" @click="activeKey = 3" :class="{active:activeKey === 3}">项目安全总监</div>
            <div class="nav" @click="activeKey = 4" :class="{active:activeKey === 4}">项目总工</div>
          </div>
          <div class="right">
            <div class="content" v-if="activeKey === 1">{{ extraDataFilter('TYPE_5') }}</div>
            <div class="content" v-if="activeKey === 2">{{ extraDataFilter('TYPE_6') }}</div>
            <div class="content" v-if="activeKey === 3">{{ extraDataFilter('TYPE_7') }}</div>
            <div class="content" v-if="activeKey === 4">{{ extraDataFilter('TYPE_8') }}</div>
          </div>
        </div>


      </a-card>

      <a-card class="mb20" v-if="this.form.status !== STATUS.DRAFT">
        <titleName title="危险源识别清单" />
        <b-table
          ref="table2"
          :scroll="{x:1576}"
          :columns="columns2"
          :request="loadData2"
          :selectConfig="{use: true, type: 'checkbox',rowKey: 'id' }"
          @select-click="selectClick2"
        >
          <template slot="prefix" v-if="isShowTableBtn">
            <a-button v-if="form.identCycleTypeStr === '月度'" class="mr20" type="primary" @click="importLastMouth()">
              导入上月信息
            </a-button>
            <a-button class="mr20" type="primary" @click="add2()">添加新项</a-button>
            <a-button
              v-btnPermission="'hse_014_del_03'"
              type="danger"
              :disabled="selectRows2.length < 1"
              class="mr20"
              @click="remove2(selectRows2)"
            >
              批量删除
            </a-button>
          </template>
          <!-- 表格行操作栏 -->
          <template slot="actions" slot-scope="text, record, index" v-if="isShowTableBtn">
            <div class="pub-table-list-action">
              <span @click="add2(record)">编辑</span>
              <span @click="remove2([record])">删除</span>
              <a-tooltip>
                <template slot="title">{{ `${record.modelId ? '已' : '未'}关联BIM模型` }}</template>
                <a-icon @click.stop="handleRelease(record)" type="link" :style="{ color: record.modelId ? '#1890ff' : '#ccc' }" />
              </a-tooltip>
            </div>
          </template>
        </b-table>
      </a-card>
      <div class="tool-btns page-btn-right-top">
        <template v-if="disabled && form.status === STATUS.WAIT_START">
          <a-button class="ml20" :loading="loading" type="primary" @click="save(STATUS.STARTING)">开始会议</a-button>
        </template>
        <template v-if="this.form.status === STATUS.END">
          <BasePrintButton
            buttonText="危险源辨识清单"
            :before-print-fn="beforePrintDetails"
            style="display: inline-block;margin-right: 20px;"
          />
          <BasePrintButton
            buttonText="危险源辨识流程"
            :before-print-fn="beforePrintExtra"
            style="display: inline-block;"
          />
        </template>
        <template v-if="form.status === STATUS.STARTING && isMe">
          <a-button class="ml20" :loading="loading" type="primary" @click="saveNoValidate(STATUS.STARTING)">保存草稿
          </a-button>
          <a-button class="ml20" :loading="loading" type="primary" @click="save(STATUS.SUBMITTING)">提交</a-button>
        </template>
        <template v-if="!disabled">
          <template v-if="form.status === STATUS.DRAFT ||
          form.status === STATUS.WAIT_START ||
          form.status === STATUS.REJECT"
          >
            <a-button class="ml20" :loading="loading" type="primary" @click="save(STATUS.WAIT_START)">提交</a-button>
          </template>
        </template>
        <a-button class="ml20" @click="$close" v-if="!isConsultation">关闭</a-button>
      </div>
    </div>
    <SelectPerson
      primary-key="userId"
      @getSelectPerson="$refs.tableEmployee.refresh()"
      :list.sync="form.meetingEmployeeList"
      title="选择人员"
      mode="multiple"
      :visible.sync="visible"
    >
    </SelectPerson>

    <seeSign
      :id="form.id"
      :visible.sync="signInVisible"
    />

    <addModal
      :visible.sync="visible2"
      :init-data="childInitData"
      @ok="$refs.table2.refresh(true)"
    />
  <selectApprover :businessId="businessId"  :processConfig="setProcessConfig"></selectApprover>
  <!-- 关联BIM模型弹窗 -->
  <BimRelease ref="bimRelease" :zIndex="1002" :destroyOnClose="true" :isRelease="false" :visible.sync="bimVisible" :modelList="modelList" :highLightList="highLightList"/>
  </base-breadcrumb>
</template>
<script>

import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 分公司
import BSelect from '@/components/BComponents/BSelect'
import SelectPerson from '@/components/Select/SelectPerson'
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
import api from '@/api/safetySupervision/base/constructionStage'
import seeSign from './seeSign'
import addModal from '@/views/safetySupervision/hazardIdentification/hazardIdentificationList/addModal'
import Api from '@/api/office/hazardIdentification'
import BimRelease from '@/components/Dialog/BimRelease' // BIM模型关联

let STATUS = {
  DRAFT: 0,
  WAIT_START: 1,
  STARTING: 2,
  SUBMITTING: 3,
  REJECT: 4,
  END: 5
}
export default {
  name: 'a' + Date.now(),
  components: {
    SelectSubCompany,
    SelectProject,
    SelectPerson,
    seeSign,
    addModal,
    BimRelease
  },
  computed: {
    canEdit() {
      if (this.disabled) {
        return false
      }
      return this.form.status === this.STATUS.DRAFT || this.form.status === this.STATUS.WAIT_START
    },
    //是否展示表格的那些按钮
    isShowTableBtn() {
      // return true
      if (this.form.status === this.STATUS.STARTING) {
        if (this.isMe) {
          return true
        }
      }
      if (this.form.status === this.STATUS.REJECT) {
        if (this.disabled) {
          return false
        }
        if (this.isMe) {
          return true
        }
      }
      return false
    },
    /* eslint-disable */
    formConfig() {
      return [

        {
          row: true,
          children: [
            {
              label: '所属单位',
              type: 'orgTree',
              keyName: 'projectId',
              rules: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
              span: 24,
              isAutoSelectFirst: true,
              isNeedAuth:true,
              checkStrictly: true,
              disabled: true,
              isQueryProjecDetail: false
            },
            // {
            //   type: SelectSubCompany,
            //   value: 'branchComId',
            //   label: '所属分公司',
            //   attrs: {
            //     disabled: true,
            //     autoSelected: true
            //   },
            //   on: {
            //     selectChange: e => this.form.branchComName = e.orgName
            //   },
            //   show: !this.form.id
            // },
            // {
            //   type: SelectProject,
            //   value: 'projectId',
            //   label: '项目名称',
            //   attrs: {
            //     form: this.form,
            //     disabled: true,
            //     keyValue: 'branchComId'
            //   },
            //   on: {
            //     selectChange: async e => {
            //       this.form.projectName = e.name
            //     }
            //   },
            //   show: !this.form.id
            // },
            // { type: 'input', value: 'branchComName', label: '所属分公司', attrs: { disabled: true }, show: this.form.id },
            // { type: 'input', value: 'projectName', label: '项目名称', attrs: { disabled: true }, show: this.form.id },
            {
              type: 'input',
              value: 'meetingName',
              label: '会议名称',
              attrs: { disabled: !this.canEdit }
            },
            {
              type: BSelect, value: 'identCycleTypeId', label: '辨识周期',
              attrs: {
                init: false,
                form: this.form,
                keyValue: 'projectId',
                disabled: true,
                request: async () => {
                  let res = await Api.chenkBaseIdent({}, { projectId: this.form.projectId })
                  if (res.code === this.SUCCESS_CODE) {
                    this.form.identCycleTypeId = res.data.id
                    return { code: this.SUCCESS_CODE, data: [res.data] }
                  }
                  return { code: this.SUCCESS_CODE, data: [] }
                }
              },
              show: this.form.id === null
            },
            {
              type: 'input',
              value: 'identCycleTypeStr',
              label: '辨识周期',
              attrs: { disabled: true },
              show: this.form.id !== null
            },
            // {
            //   type: 'input',
            //   value: 'projectName',
            //   label: '项目名称',
            //   attrs: { disabled: true },
            //   show: this.disabled
            // },
            {
              type: 'month-picker',
              value: 'month',
              label: '会议月份',
              attrs: {
                format: 'YYYY-MM',
                valueFormat: 'YYYY-MM',
                disabled: !this.canEdit
              }
            },
            {
              type: BSelect, value: 'cataDetailsId', label: '当前施工阶段',
              attrs: {
                keys: ['id', 'allName'],
                init: true,
                request: async () => {
                  let res = await api.list({}, { type: 0, 'haveTree': true })
                  if (res.code === this.SUCCESS_CODE) {
                    let temp = []
                    res.data.map(v => {
                      temp = temp.concat(v.detailsVOS)
                    })
                    return { code: this.SUCCESS_CODE, data: temp.filter(v => v.status === 0) }
                  }
                  return { code: this.SUCCESS_CODE, data: [] }
                }
              },
              show: this.canEdit
            },
            { type: 'input', value: 'cataDetailsStr', label: '当前施工阶段', attrs: { disabled: true }, show: !this.canEdit },
            {
              type: 'textarea',
              value: 'meetingExplain',
              label: '会议说明',
              colSpan: 24,
              noFixed: true,
              attrs: { disabled: !this.canEdit }
            },
            // {
            //   type: ASelectOrgPeople, value: 'speaker', label: '主持人/主讲人',
            //   attrs: {
            //     disabled: this.disabled,
            //     selectPeopleName: this.form.speakerName,
            //     init: false,
            //     form: this.form,
            //     keyValue: 'projectId',
            //   },
            //   on: {
            //     selectPeopleNameDone: $event => {
            //       this.form.speakerName = $event.name
            //     },
            //     onSelectChange: $event => {
            //       this.form.speakerName = $event.name
            //     }
            //   }
            // },
            {
              type: SelectPersonByProject, value: 'speakerId', label: '主持人/主讲人',
              attrs: {
                showSearch: true,
                mode: 'combobox',
                'option-label-prop': 'children',
                disabled: !this.canEdit,
                projectId: this.form.projectId
              }
            },
            {
              type: 'date-picker', value: 'meetTime', label: '会议时间', attrs: {
                showTime: { format: 'HH:mm' },
                format: 'YYYY-MM-DD HH:mm',
                valueFormat: 'YYYY-MM-DD HH:mm:ss',
                disabled: !this.canEdit
              }
            },
            {
              type: 'input',
              value: 'meetingPlace',
              label: '会议地点',
              attrs: { disabled: !this.canEdit }
            },
            {
              type: BSelect, value: 'status', label: '状态',
              show: this.form.id,
              attrs: {
                disabled: true,
                list: [
                  { id: 0, name: '草稿' },
                  { id: 1, name: '待开始' },
                  { id: 2, name: '进行中' },
                  { id: 3, name: '审批中' },
                  { id: 4, name: '审批不通过' },
                  { id: 5, name: '完结' }
                ]
              }
            },
            {
              type: 'custom', value: 'shouldNum', label: this.form.status === STATUS.END ? '实际参会人数' : '应参会人数',
              show: this.form.status !== STATUS.DRAFT,
              render: () => {
                return (
                  <div style="display: flex;align-items: center;">
                    <b-input disabled
                             value={(this.form.status === STATUS.END ? this.form.realNum : this.form.shouldNum) || 0}
                    />
                    <a-button style="margin-left:20px" type="primary"
                              onClick={e => this.signInVisible = true}
                    >
                      查看签到
                    </a-button>
                    {
                      this.form.status !== STATUS.END &&
                      <a-button style="margin-left:20px" type="primary" onClick={this.handleLargeScreen}>会议大屏</a-button>
                    }
                  </div>
                )
              }
            },
            {
              type: 'custom', value: 'fileInfoList', label: '照片上传', colSpan: 24, noFixed: true,
              show: this.form.status !== STATUS.DRAFT && this.form.status !== STATUS.WAIT_START,
              render: () => {
                return (<div>
                  {
                    (this.form.status === STATUS.STARTING && this.isMe) &&
                    <span style="font-size:14px;color:#999;">限2张，支持扩展名：png、jpg、jpeg...</span>
                  }
                  <b-upload2 uploadType="image-list"
                             disabled={!this.isShowTableBtn}
                             maxUploadCount={2}
                             businessCode="UN09"
                             v-model={this.form.fileInfoList}
                  />

                </div>)
              }
            }
          ]
        }
      ]
    }
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    },
   // 是否作为意见征询
    isConsultation: {
        type: Boolean,
        default: false
    }
  },
  watch: {
    isAudit: {
      handler(val) {
        if (val) {
          this.disabled = true
          this.isMe = false
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      STATUS,
      beforePrintExtra: async e => {
        let res = await Api.printExtra({}, { dangerMeetId: this.form.id })
        return res.data.content
      },
      beforePrintDetails: async e => {
        let res = await Api.printDetails({}, { dangerMeetId: this.form.id })
        return res.data.content
      },
      activeKey: 1,
      loading: false,
      signInVisible: false,

      disabled: this.$route.query.pageType === 'look',
      isMe: false,

      form: {
        id: null,
        projectId:null,
        status: STATUS.DRAFT,
        meetingEmployeeList: [],
        fileInfoList: []
      },
      rules: {
        month: [{ required: true, message: '请选择月份' }],
        branchComId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        cataDetailsId: [{ required: true, message: '请选择当前施工阶段', trigger: 'change' }],
        identCycleTypeId: [{ required: true, message: '请选择辨识周期', trigger: 'change' }],
        meetTime: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
        meetingExplain: [{ required: true, message: '请输入会议说明', trigger: 'blur' }],
        meetingName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        meetingPlace: [{ required: true, message: '请输入会议地点', trigger: 'blur' }],
        speakerId: [{ required: true, message: '请输入主持人/主讲人', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        fileInfoList: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }]
      },
      visible: false,
      bimVisible:false,
      modelList: [],
      highLightList:'',
      selectRows: [],
      columnsEmployee: [
        { title: '员工名称', dataIndex: 'name' },
        { title: '电话号码', dataIndex: 'phone' },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '100px',
          scopedSlots: { customRender: 'actions' }
        }
      ],
      loadDataEmployee: (parameter) => {
        return new Promise((resolve, reject) => {
          let obj = {}
          obj.code = 200
          obj.currentPage = parameter.pageNo
          obj.pageSize = parameter.pageSize
          obj.totalPage = Math.ceil(this.form.meetingEmployeeList.length / parameter.pageSize)
          obj.totalSize = this.form.meetingEmployeeList.length
          obj.data = this.form.meetingEmployeeList || []
          // console.log(obj)
          resolve(obj)
        })
      },

      rowSelection: { selectedRowKeys: [] },

      visible2: false,
      selectRows2: [],
      childInitData: {},
      columns2: [
        { title: '区域', dataIndex: 'areaName', width: 120 },
        { title: '分部分项工程', dataIndex: 'itemTypeStr', width: 140 },
        {
          title: '预计实施时间', dataIndex: 'planTime', width: 200,
          customRender: (text, record, index) => {
            return record.planTime + '~' + record.planTimeEnd
          }
        },
        // { title: '预计实施时间结束', dataIndex: 'planTimeEnd', width: 160 },
        { title: '危险参数', dataIndex: 'parameter', width: 130 },
        { title: '危险源', dataIndex: 'dangerSource', width: 330 },
        { title: '风险等级', dataIndex: 'levelTypeStr', width: 100 },
        { title: '危大工程等级', dataIndex: 'dangerousTypeStr', width: 130 },
        {
          title: '责任人', dataIndex: 'dutyUser',
          customRender: (text) => {
            return Object.values(text).join('、')
          },
          width: 200
        },
        { title: '控制措施', dataIndex: 'controlContent', width: 350 },
        { title: '操作', fixed: 'right', dataIndex: 'actions', scopedSlots: { customRender: 'actions' }, width: 150 }
      ],
      loadData2: q => {
        return Api.findListByDetails(Object.assign(q, { query: { dangerMeetId: this.form.id } }))
      },
      extraList: [],
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
 async mounted() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getData()
    }else{
      this.form.projectId = this.$userInfo().currentPost.projectId;
    }
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('danger_meeting_process')
    
  },
  methods: {
    selectOrg(val) {
      this.form.branchComName = val[val.length - 2].orgName
      this.form.branchComId = val[val.length - 2].orgId
      this.form.projectName = val[val.length - 1].projectName
      this.form.projectId = val[val.length - 1].projectId
    },
    extraDataFilter(noticeType) {
      let res = this.extraList.find(v => v.noticType === noticeType)
      if (res) {
        return res.content
      }
    },
    selectClick(e) {
      let { rows, keys } = e
      this.selectRows = rows
    },
    selectClick2(e) {
      let { rows, keys } = e
      this.selectRows2 = rows
    },
    removePeople(rows) {
      this.$submitConfirm(() => {
        rows.map(v => {
          let resIndex = this.form.meetingEmployeeList.findIndex(w => w.id === v.id)
          if (resIndex !== -1) {
            this.form.meetingEmployeeList.splice(resIndex, 1)
          }
        })
        this.selectRows = []
        this.$refs.tableEmployee.refresh(true)
      }, '确定移除?')
    },
    async getData() {
      this.loading = true
      let res = await Api.findListByMainId({}, { id: this.form.id })
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.form = res.data
        this.form.meetingEmployeeList.map(v => {
          v.name = v.signUser
        })
        this.$refs.tableEmployee && this.$refs.tableEmployee.refresh()
        if (!this.form.fileInfoList) {
          this.form.fileInfoList = []
        }
        if (!this.isAudit) {
          this.isMe = this.$userInfo().id === this.form.creatorId
        }
        if (this.form.status !== this.STATUS.DRAFT) {
          let res2 = await Api.getExtraList({}, { dangerMeetId: this.form.id })
          if (res2.code === this.SUCCESS_CODE) {
            this.extraList = res2.data
          }
        }
      }
      console.log(this.form.status,'111')
    },
    async saveNoValidate(status) {
      let temp = this.$clone(this.form)
      temp.status = status
      temp.meetingEmployeeList.map(v => {
        delete v.id
        v.signIn = false
        v.signType = 0
        v.signUser = v.name
      })
      let res
      this.loading = true
      if (temp.id) {
        res = await Api.editByMain(temp)
      } else {
        res = await Api.createByMain(temp)
      }
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.form.id = res.data.id
        this.$noticeSuccess('操作成功')
        this.$close()
        // this.getData()
      }
    },
    save(status) {
      this.setProcessConfig = null;
      if (this.form.status === this.STATUS.REJECT) {
        status = this.STATUS.SUBMITTING
      }
      this.$refs.BForm.validate(async (valid) => {
        if (valid) {
          // if (true) {
          let temp = this.$clone(this.form)
          temp.status = status
          temp.meetingEmployeeList.map(v => {
            delete v.id
            v.signIn = false
            v.signType = 0
            v.signUser = v.name
          })

          let res
          this.loading = true
          this.submitApprovalConfirm(status == 3 ? this.processConfig : 6, async (flag)=>{
            if(!flag) {
              this.loading = false
              return
            }
          if (temp.id) {
            res = await Api.editByMain(temp)
          } else {
            res = await Api.createByMain(temp)
          }
          this.loading = false
          if (res.code === this.SUCCESS_CODE) {
            this.form.id = res.data.id
            this.$noticeSuccess('操作成功')
           if(status*1===3) {
            //提交时，返回id
                this.businessId = res.data.id;
                this.setProcessConfig = this.processConfig;
                return
            }else{
              this.$close()
          }
            // this.getData()
          }
          })
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    async importLastMouth() {
      this.$submitConfirm(async () => {
        let res = await Api.exportLastMonth({}, { dangerMeetId: this.form.id })
        if (res.code === this.SUCCESS_CODE) {
          if (res.data.flag) {
            this.$message.success('导入成功')
          } else {
            this.$message.warning(res.data.message)
          }
          this.$refs.table2.refresh(true)
        }
      }, '确定需要导入上月信息')
    },
    add2(data = {}) {
      this.childInitData = {
        ...data,
        dangerMeetId: this.form.id,
        projectId: this.form.projectId
      }
      this.visible2 = true
    },
        /**
    * @description: 查看关联的BIM模型
     * @param {*} record：业务对象
     * @return {*}
     */
     handleRelease(record) {
      if (record.modelId) {
        this.modelList = [{ id: record.modelId, modelId: record.modelFileId, version: record.modelFileVersion, modelTitle: record.modelTitle, uuId: [record.bimId?.split('&&&&')?.[1]], subAreaId: record.subAreaId }];
        this.highLightList = record.bimId?.split('&&&&')?.[0];
        this.bimVisible = true
      }
    },
    remove2(rows) {
      this.$delList2(Api.deleteByDetailList, () => {
        this.selectRows2 = []
        this.$refs.table2.refresh()
      }, { ids: rows.map(v => v.id) })
    },
    async handleLargeScreen() {
      let res = await Api.selectMeetConfig(null, { dangerMeetId: this.form.id })
      if (res.code === this.SUCCESS_CODE) {
        let routeData = this.$router.resolve({
          path: '/conferenceScreen',
          query: {
            meetingName: this.form.meetingName,
            branchComName: this.form.branchComName,
            projectName: this.form.projectName,
            meetingPlace: this.form.meetingPlace,
            startTime: this.form.meetTime,
            orCode: res.data
          }
        })
        window.open(routeData.href, '_blank')
      }
    }
  }
}
</script>
<style lang="less" scoped>

.wrapper {
  display: flex;

  .left {
    max-height: 162px;
    //width: 100px;
    border: 1px solid #d9d9d9;

    .nav {
      height: 40px;
      width: 140px;
      display: flex;
      align-items: center;
      //justify-content: center;
      border-top: 1px solid #d9d9d9;

      &:nth-child(1) {
        border: none;
      }

      &.active {
        background: rgb(2, 167, 240);
        color: white;
      }
    }
  }

  .right {
    word-break: break-all;
    overflow: auto;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    flex: 1;
    height: 200px;
    margin-left: 15px;
    background: rgb(245, 245, 245);
    padding: 10px;
  }
}

</style>
